<template>
  <div>
    <div class="top">
      <p class="inp">
        商品名称 ： <input type="text" placeholder="请输入" />
        <el-button type="primary" :loading="true">搜索</el-button>
      </p>
    </div>
    <div class="bod">
      <div class="annui">
        <button class="del">删除</button>
        <button class="add">
          <el-icon><Plus /></el-icon>
          新增
        </button>
      </div>
      <div class="tab">
        <el-table
          :data="tab.tableData"
          height="550"
          style="width: 100%"
          :cell-style="{ padding: '20px 0' }"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="name" label="名称" />
          <el-table-column prop="type" label="类型" />
          <el-table-column prop="sun" label="面值" />
          <el-table-column prop="manjian" label="消费满减" />
          <el-table-column prop="shuliang" label="可领数量" />
          <el-table-column prop="faxing" label="发行数量" />
          <el-table-column prop="shenyu" label="剩余劵" />
          <el-table-column prop="yonghu" label="新用户" />
          <el-table-column prop="zhuangtai" label="状态" />
          <el-table-column prop="shenxiao" label="生效时间" />
          <el-table-column prop="guoqi" label="过期时间" />
          <el-table-column
            prop="guoqi"
            label="操作"
            fixed="right"
            width="120"
            align="center"
          >
            <button class="compile">
              <el-icon><MoreFilled /></el-icon>
            </button>
            <button class="deleter">
              <el-icon><Delete /></el-icon>
            </button>
          </el-table-column>
        </el-table>
      </div>
      <div class="bottom">
        <el-pagination
          v-model:current-page="currentPage4"
          v-model:page-size="pageSize4"
          :page-sizes="[10, 20, 30, 40]"
          :small="small"
          :disabled="disabled"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          :total="100"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ShujuStore } from "../Marketing/hsuju.js";

const tab = ShujuStore();
</script>

<style scoped>
.top {
  height: 76px;
  background-color: white;
  line-height: 76px;
  box-sizing: border-box;
  padding-left: 20px;
  border-radius: 10px;
}
input {
  width: 220px;
  height: 36px;
  outline: none;
  border: transparent;
  background-color: rgb(246, 246, 246);
  padding-left: 10px;
  margin-right: 41px;
  border-radius: 5px;
}
.inp {
  font-size: 18px;
}
button {
  text-align: center;
  width: 70px;
  height: 36px;
  border-radius: 5px;
  line-height: 36px;
  outline: none;
  border: transparent;
  background-color: rgb(255, 106, 108);
  color: white;
  font-size: 14px;
}
button:hover {
  /* background-color: rgb(255, 106, 108); */
  opacity: 0.8;
}
.bod {
  width: 100%;
  height: 78vh;
  background-color: white;
  margin-top: 16px;
  border-radius: 10px;
  position: relative;
}
.del {
  background-color: blueviolet;
}
.add {
  background-color: #ffa66a;
}
.annui {
  width: 100%;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 20px;
}
.compile {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: white;
  border: 1px solid #dcdfe6;
  color: #7a7b7f;
}
.compile:hover {
  background-color: rgb(255, 106, 108);
}
.deleter {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-left: 10px;
  background-color: white;
  border: 1px solid #dcdfe6;
  color: #7a7b7f;
  line-height: 40px;
}
.deleter:hover {
  background-color: rgb(255, 106, 108);
}
.bottom {
  position: absolute;
  bottom: 20px;
}
</style>
